<template>
  <div class="data-body">
    <div class="body-box">
      <div class="data-left">
        <div class="data-border" style="height: 25%">
          <div class="data-title">数据汇总</div>
        </div>
        <div
          class="data-border regional_table"
          style="margin-top: 1.5% !important; height: 36%"
        >
          <div class="data-title">案件进展分析</div>
        </div>
        <div
          class="data-border"
          style="margin-top: 1.5% !important; height: 36%; position: relative"
        >
          <div class="data-title">受损分析</div>
        </div>
      </div>
      <div class="data-middle">
        <div
          class="data-border"
          style="position: relative; height: 52.5%; padding: 4% 10px"
        ></div>

        <div
          class="data-border"
          style="
            margin-top: 1.5% !important;
            height: 44.5%;
            padding: 20px 8px 20px 8px;
          "
        >
          <div style="width: 100%; display: flex; justify-content: flex-end">
            <el-dropdown @command="handleCommand" style="margin-right: 15px">
              <span class="el-dropdown-link" style="color: #fff">
                <i class="el-icon-arrow-down el-icon-more"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="select">选择</el-dropdown-item>
                <el-dropdown-item command="data">数据</el-dropdown-item>
                <el-dropdown-item command="delete">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <showTable style="height: 90%" :data="tableData"></showTable>
        </div>
      </div>
      <div class="data-right">
        <div class="data-border" style="height: 25%">
          <div class="data-title">点位信息</div>
        </div>
        <div
          class="data-border"
          style="margin-top: 1.5% !important; height: 36%"
        >
          <div class="data-title">点位图片</div>
        </div>
        <div
          class="data-border"
          style="
            margin-top: 1.5% !important;
            height: 36%;
            position: relative;
            overflow: auto;
          "
        ></div>
      </div>
    </div>
    <el-dialog title="选择展示字段" :visible.sync="dialogFormVisible">
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          style="margin-top: 10px"
          v-for="field in configData"
          :label="field.DSPF_ID"
          :key="field.DSPF_ID"
          :checked="field.isSelected"
        >
          {{ field.DSPF_NameDes }}
        </el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="setShowConfig">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { GetAllTerms } from '@/api/project/position.js'
import { GetShowConfig, SetShowConfig } from '@/api/project/show.js'
export default {
  computed: {},
  components: {},
  data: function () {
    return {
      prjId: 0,
      map: null,
      terms: [],
      dialogFormVisible: false,
      configData: [],
      checkList: [],
      tableData: {
        data: [],
        ids: '1,2,3',
      },
    }
  },
  methods: {
    handleCommand(command) {
      switch (command) {
        case 'select':
          this.doGetShowConfig()
          break
      }
    },
    doGetShowConfig() {
      var that = this
      GetShowConfig(1).then((r) => {
        that.configData = r.data.projectFields
        that.dialogFormVisible = true
      })
    },
    setShowConfig() {
      var that = this
      console.log(this.checkList.toString())
      SetShowConfig(1, this.checkList.toString()).then((r) => {})
    },
    uploadData() {},
  },
  mounted: function () {
    var that = this
    const script = document.createElement('script')
    script.src = 'https://map.rdunion.cn:9001/bigemap.js/v2.1.0/bigemap.js'
    script.onload = () => {
      this.prjId = this.$route.query.id
      BM.Config.HTTP_URL = 'https://map.rdunion.cn:9001'
      GetAllTerms({ prjIds: [1009] }).then((r) => {
        that.tableData.data = r.data
      })
      // this.map = BM.map('map', 'bigemap.cehqu50n', {
      //   center: [35.9879150390625, 103.39543151855469],
      //   zoom: 11,
      //   zoomControl: true,
      // })
    }
    document.head.appendChild(script)
  },
}
</script>
  
<style scoped>
.data-body {
  width: 100%;
  height: 100%;
  background-image: url('~@/assets/show_images/bg.png');
  background-size: 100% 100%;
  position: absolute;
  display: flex;
}

@media screen and (max-height: 1000px) {
  .project-title {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 20px;
    color: #2ff8ff;
    height: 30px;
    line-height: 30px;
    margin-top: 12px !important;
    text-align: center;
    width: 100%;
  }
  .map {
    height: 100%;
    background-repeat: no-repeat;
    background-position-x: -300px;
    background-position-y: -200px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    cursor: move;
  }
  .data-middle {
    width: 43.1%;
    height: 100%;
    margin-left: 0.3%;

    box-sizing: border-box;
    position: relative;
  }
  .data-title {
    width: 95%;
    background-image: url('~@/assets/show_images/first_title.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: auto;
    height: 30px;
    line-height: 30px;
    text-align: left;
    color: white;
    font-size: 13px;
    font-weight: bold;
    padding-left: 35px;
  }
}
@media screen and (min-height: 1000px) {
  .project-title {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 22px;
    color: #2ff8ff;
    height: 35px;
    line-height: 35px;
    margin-top: 15px !important;
    text-align: center;
    width: 100%;
  }
  .map {
    height: 100%;
    background-repeat: no-repeat;
    background-position-x: -300px;
    background-position-y: -200px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    cursor: move;
  }
  .data-middle {
    width: 43.1%;
    height: 100%;
    margin-left: 0.3%;
    padding-top: 50px;
    box-sizing: border-box;
    position: relative;
  }
  .data-title {
    width: 95%;
    background-image: url('~@/assets/show_images/first_title.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: auto;
    height: 60px;
    line-height: 60px;
    text-align: left;
    color: white;
    font-size: 14px;
    font-weight: bold;
    padding-left: 55px;
  }
}
.body-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 50px 20px 20px 20px;
  display: flex;
}
.data-border {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-image: url('~@/assets/show_images/bg-box.png');
  background-size: 100% 100%;
}
.data-left {
  width: 28%;
  height: 100%;
  margin-left: 0.3%;

  box-sizing: border-box;
}

.data-right {
  width: 28%;
  height: 100%;
  margin-left: 0.3%;
  box-sizing: border-box;
}

.data-title-box {
  height: 28px;
  width: 100%;
  top: 0px;
  left: 0px;
  background-color: rgba(17, 25, 69, 0.54);
  border-radius: 11px 11px 0px 0px;
  position: relative;
}
.data-title-innerbox {
  position: absolute;
  top: -4px;
  width: 100%;
}
</style>
  